<template>
	<el-row :gutter="40">
		<el-col v-if="!form.id">
			<el-empty description="请选择左侧菜单后操作" :image-size="100"></el-empty>
		</el-col>
		<template v-else>
			<el-col :lg="12">
				<h2>{{ i18n_formTitle || '新增菜单' }}</h2>
				<el-form ref="dialogForm" :model="form" :rules="rules" label-width="80px" label-position="right">
					<el-form-item label="上级菜单" prop="pid">
						<el-cascader
							v-model="form.pid"
							:options="menuTreeList"
							:props="{ value: 'id', label: 'title', children: 'children', checkStrictly: true, emitPath: false }"
							clearable
						/>
					</el-form-item>
					<el-form-item class="local_form-item_title" label="显示名称" prop="title">
						<template #label>
							<el-tooltip :content="`多语言显示：${i18n_formTitle}`" placement="right">
								<template #content>
									<div>
										多语言显示：{{ i18n_formTitle }}<br />
										<span style="color: var(--el-color-danger)">若需要配置多语言：配置 route.['{{ form.title }}']</span>
									</div>
								</template>
								<span class="flex flex-align-pack-center">
									显示名称<Warning style="width: 16px; margin-left: 4px; color: var(--el-color-danger)" />
								</span>
							</el-tooltip>
						</template>
						<el-input v-model="form.title" clearable placeholder="菜单显示名字"></el-input>
					</el-form-item>
					<el-form-item label="类型" prop="type">
						<el-radio-group v-model="form.type">
							<el-radio-button label="0">菜单</el-radio-button>
							<el-radio-button label="1">Iframe</el-radio-button>
							<el-radio-button label="2">外链</el-radio-button>
							<el-radio-button label="3">按钮</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="父级别名" prop="parentRoute">
						<el-input v-model="form.parentRoute" placeholder="指定父级别名: 主入口(mainLayout)"></el-input>
						<div class="el-form-item-msg">
							若有指定父级菜单，才需要填写。 <br />
							若插入主入口: “<span style="color: var(--el-color-warning)">mainLayout</span>”
						</div>
					</el-form-item>
					<el-form-item label="别名" prop="alias">
						<el-input v-model="form.alias" clearable placeholder="菜单别名"></el-input>
						<div class="el-form-item-msg">系统唯一且与内置组件名一致，否则导致缓存失效。如类型为Iframe的菜单，别名将代替源地址显示在地址栏</div>
					</el-form-item>
					<el-form-item label="菜单图标" prop="icon">
						<IconPicker v-model="form.icon" />
					</el-form-item>
					<el-form-item label="路由地址" prop="path">
						<template #label>
							<span class="flex flex-align-pack-center"
								>路由
								<el-tooltip content="正常路由地址，次顶级菜单记得'/'开头" placement="right">
									<Warning style="width: 16px; margin-left: 4px; color: var(--el-color-danger)" /> </el-tooltip></span>
						</template>
						<el-input v-model="form.path" clearable placeholder="请认真填写路由，否则可能无法访问"></el-input>
					</el-form-item>
					<el-form-item label="重定向" prop="redirect">
						<el-input v-model="form.redirect" clearable placeholder=""></el-input>
						<div class="el-form-item-msg" style="color: var(--el-color-danger)">若为Iframe的外部链接，请填写URL地址，eg: 「https://xxxx.com」格式</div>
					</el-form-item>
					<!--					<el-form-item label="菜单高亮" prop="active">
						<el-input v-model="form.active" clearable placeholder=""></el-input>
						<div class="el-form-item-msg">子节点或详情页需要高亮的上级菜单路由地址</div>
					</el-form-item>-->
					<el-form-item label="视图" prop="component">
						<template #label>
							<span class="flex flex-align-pack-center"
								>视图
								<el-tooltip content="若没有填默认“Layout”" placement="right">
									<Warning style="width: 16px; margin-left: 4px; color: var(--el-color-danger)" /> </el-tooltip
							></span>
						</template>
						<el-input v-model="form.component" clearable placeholder="">
							<template #prepend>views/</template>
							<template #append>.vue</template>
						</el-input>
						<div class="el-form-item-msg">如父节点、链接或Iframe等没有视图的菜单不需要填写</div>
					</el-form-item>
					<el-form-item label="排序" prop="sort">
						<el-input-number v-model="form.sort" :min="0" :max="9999"></el-input-number>
						<div class="el-form-item-msg">排序规则、由大到小排序</div>
					</el-form-item>
					<!--					<el-form-item label="颜色" prop="color">
						<el-color-picker v-model="form.color" :predefine="predefineColors"></el-color-picker>
					</el-form-item>-->
					<el-form-item label="是否隐藏" prop="hidden">
						<el-checkbox v-model="form.hidden">隐藏菜单</el-checkbox>
						<!--						<el-checkbox v-model="form.hiddenBreadcrumb">隐藏面包屑</el-checkbox>-->
						<div class="el-form-item-msg">菜单不显示在导航中，但用户依然可以访问，例如详情页</div>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" :loading="loading" @click="save">保 存</el-button>
					</el-form-item>
				</el-form>
			</el-col>

			<el-col :lg="12" class="apilist">
				<h2>接口权限</h2>
				<sc-form-table v-model="form.apiList" :add-template="apiListAddTemplate" placeholder="暂无匹配接口权限">
					<el-table-column prop="code" label="标识" width="150">
						<template #default="scope">
							<el-input v-model="scope.row.code" placeholder="请输入内容"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="url" label="Api url">
						<template #default="scope">
							<el-input v-model="scope.row.url" placeholder="请输入内容"></el-input>
						</template>
					</el-table-column>
				</sc-form-table>
			</el-col>
		</template>
	</el-row>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import resource from '@/api/system/resource'
import IconPicker from '@/components/IconPicker/index.vue'
import ScFormTable from '@/components/ScFormTable'
import { ElMessage } from 'element-plus'
import { generateTitle } from '@/utils/i18n'
const dialogForm = ref()
const form = ref({
	id: '',
	pid: '',
	alias: '',
	path: '',
	component: '',
	redirect: '',
	title: '',
	icon: '',
	active: '',
	color: '',
	type: '0',
	sort: 0,
	apiList: [],
	// 指定父级菜单(路由)名称
	parentRoute: ''
})
const menuTreeList = ref()
const i18n_formTitle = computed(() => {
	return generateTitle(form.value.title)
})
const predefineColors = ref(['#ff4500', '#ff8c00', '#ffd700', '#67C23A', '#00ced1', '#409EFF', '#c71585'])
const rules = {
	title: [{ required: true, message: '请输入显示名称', trigger: 'blur' }],
	path: [{ required: true, message: '请输入路由地址', trigger: 'blur' }],
	alias: [{ required: true, message: '请输入别名', trigger: 'blur' }],
	sort: [{ required: true, trigger: 'blur' }]
}
const apiListAddTemplate = ref({
	code: '',
	url: ''
})
const loading = ref(false)
const $myEmit = defineEmits(['successCb'])

// methods
const save = () =>
	dialogForm.value.validate(async (valid, err) => {
		if (valid) {
			// 保存
			loading.value = true
			try {
				await resource.resourceAddOrEditSaveApi(form.value)
				ElMessage.success('保存成功')
				$myEmit('successCb')
				loading.value = false
			} catch (e) {
				loading.value = false
				console.log(e, '保存菜单失败')
			}
		} else {
			console.error(err, 'err')
		}
	})

const setData = async data => {
	//表单注入数据
	loading.value = true
	try {
		let res = await resource.resourceListApi({ id: data.id })
		loading.value = false
		form.value = {
			...data,
			apiList: res
		}
		console.log(form.value, 'form.value =')
		// dialogForm.value?.validateField()
		dialogForm.value?.resetFields()
	} catch (e) {
		console.log('表单注入数据失败', e)
		form.value.id = ''
		loading.value = false
	}

	// 上级菜单
	menuTreeList.value = await resource.resourceListTreeApi()
}

// 父组件使用的话需要导出
defineExpose({
	setData
})
</script>
<style scoped lang="scss">
h2 {
	font-size: 17px;
	color: #3c4a54;
	padding: 0 0 30px 0;
}
.apilist {
	border-left: 1px solid #eee;
}
[data-theme='dark'] h2 {
	color: #fff;
}
[data-theme='dark'] .apilist {
	border-color: #434343;
}

.el-form-item-msg {
	margin-top: 6px;
	font-size: 12px;
	color: #999;
	clear: both;
	width: 100%;
	line-height: 16px;
}
:deep(.local_form-item_title) {
	.el-form-item__label {
		margin-left: -20px;
		width: 100px !important;
	}
}
</style>
